<template>
  <div id="adminUserPage">
    <a-form
        style="margin-bottom: 20px"
        layout="inline"
        :model="formSearchParams"
        @submit="doSearch"
    >
      <a-form-item field="userName" label="用户名">
        <a-input allow-clear @clear="doSearch" v-model="formSearchParams.userName" placeholder="请输入用户名"/>
      </a-form-item>
      <a-form-item field="userProfile" label="用户简介">
        <a-input allow-clear @clear="doSearch" v-model="formSearchParams.userProfile" placeholder="请输入用户简介"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100px">
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <a-table :columns="columns" :data="dataList"
             :pagination="{ showTotal: true, pageSize: searchParams.pageSize, current: searchParams.current, total }"
             @page-change="onPageChange"
    >
      <template #userAvatar="{ record }">
        <a-image width="64" :src="record.userAvatar"/>
      </template>
      <template #createTime="{ record }">
        {{ formatDate(record.createTime) }}
      </template>
      <template #updateTime="{ record }">
        {{ formatDate(record.updateTime) }}
      </template>
      <template #optional="{ record }">
        <a-space>
          <a-button status="danger" @click="doDelete(record)">删除</a-button>
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import {ref, watchEffect} from "vue";
import {deleteUserUsingPost, listUserByPageUsingPost} from "@/api/userController";
import API from "@/api";
import message from "@arco-design/web-vue/es/message";
import moment from "moment";

const formSearchParams = ref<API.UserQueryRequest>({
});

// 初始化搜索条件(不应该被修改)
const initSearchParams = {
  current: 1,
  pageSize: 10
};

// 搜索参数
const searchParams = ref<API.UserQueryRequest>({
  ...initSearchParams
});

const dataList = ref<API.User[]>([]);
const total = ref<number>(0);

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listUserByPageUsingPost({
    ...searchParams.value,
    sortOrder: "desc",
    sortField: "updateTime"
  });
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

/**
 * 执行搜索
 */
const doSearch = () => {
  searchParams.value = {
    ...initSearchParams,
    ...formSearchParams.value
  };
};

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page
  };
};

/**
 * 删除
 * @param record
 */
const doDelete = async (record: API.User) => {
  if (!record.id) return;
  const res = await deleteUserUsingPost({
    id: record.id
  });
  if (res.data.code === 0) {
    loadData();
  } else {
    message.error("删除失败，" + res.data.message);
  }
};

// 格式化日期方法
const formatDate = (dateStr: string) => {
  return moment(dateStr).format('YYYY年MM月DD日 HH:mm:ss');
};

/**
 * 监听searchParams变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});

// 表格列配置
const columns = [
  {
    title: "id",
    dataIndex: "id"
  }, {
    title: "账号",
    dataIndex: "userAccount"
  }, {
    title: "用户昵称",
    dataIndex: "userName"
  }, {
    title: "用户头像",
    dataIndex: "userAvatar",
    slotName: "userAvatar"
  }, {
    title: "用户简介",
    dataIndex: "userProfile"
  }, {
    title: "用户权限",
    dataIndex: "userRole"
  }, {
    title: "创建时间",
    dataIndex: "createTime",
    slotName: "createTime"
  }, {
    title: "更新时间",
    dataIndex: "updateTime",
    slotName: "updateTime"
  }, {
    title: "操作",
    slotName: "optional"
  }
];

</script>
